<!--  -->
<template>
  <div class="table-title" ref="tableTitle">Headcount人事总人数</div>
  <el-table :data="tableData" style="width: 100%" border :height="selfTableHeight" header-cell-class-name="table-header-row" :span-method="objectSpanMethod">
    <el-table-column prop="Sequence" label="序号" width="120" fixed />
    <el-table-column prop="Name" label="姓名 Name" width="120" fixed />
    <el-table-column prop="Facility" label="地点 Facility" width="120" fixed />
    <el-table-column prop="Level" label="级别 Level" width="120" fixed />
    <el-table-column prop="Position" label="职位 Position" width="120" fixed />
    <el-table-column v-for="(item, idx) in tableColumn" :key="idx" :prop="item" :label="item" width="100" />

    <el-table-column fixed="right" label="操作" min-width="80">
      <template>
        <el-button link type="primary">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { generateDates } from '../../utils'

const tableTitle = ref<HTMLElement | null>(null)
const props = defineProps({
  tableHeight: {
    type: Number,
    default: 500,
  },
})

const tableColumn = ref<string[]>([])

tableColumn.value = generateDates('2024-7-8', '2025-2-3', 7, 'yyyy-M-d')
const dates = { '2024-7-8': 1, '2024-7-15': 1, '2024-7-22': 1, '2024-7-29': 1, '2024-8-5': 1, '2024-8-12': 1, '2024-8-19': 1, '2024-8-26': 1, '2024-9-2': 1, '2024-9-9': 1, '2024-9-16': 1, '2024-9-23': 1, '2024-9-30': 1, '2024-10-7': 1, '2024-10-14': 1, '2024-10-21': 1, '2024-10-28': 1, '2024-11-4': 1, '2024-11-11': 1, '2024-11-18': 1, '2024-11-25': 1, '2024-12-2': 1, '2024-12-9': 1, '2024-12-16': 1, '2024-12-23': 1, '2024-12-30': 1, '2025-1-6': 1, '2025-1-13': 1, '2025-1-20': 1, '2025-1-27': 1, '2025-2-3': 1 }
const tableData = [
  {
    Sequence: 'Headcount',
    Name: '',
    Facility: '',
    Level: '',
    Position: '',
    '2024-7-8': 53.0,
    '2024-7-15': 53.0,
    '2024-7-22': 53.0,
    '2024-7-29': 53.0,
    '2024-8-5': 53.0,
    '2024-8-12': 53.0,
    '2024-8-19': 53.0,
    '2024-8-26': 53.0,
    '2024-9-2': 53.0,
    '2024-9-9': 53.0,
    '2024-9-16': 53.0,
    '2024-9-23': 53.0,
    '2024-9-30': 53.0,
    '2024-10-7': 53.0,
    '2024-10-14': 53.0,
    '2024-10-21': 53.0,
    '2024-10-28': 53.0,
    '2024-11-4': 53.0,
    '2024-11-11': 53.0,
    '2024-11-18': 53.0,
    '2024-11-25': 53.0,
    '2024-12-2': 53.0,
    '2024-12-9': 53.0,
    '2024-12-16': 53.0,
    '2024-12-23': 53.0,
    '2024-12-30': 53.0,
    '2025-1-6': 53.0,
    '2025-1-13': 53.0,
    '2025-1-20': 53.0,
    '2025-1-27': 53.0,
    '2025-2-3': 53.0,
  },
  { Sequence: '1', Name: '翟心如', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '2', Name: '高瑞', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '3', Name: '胡欣悦', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '4', Name: '王可可', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '5', Name: '赵程北', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '6', Name: '赵雪凯', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '7', Name: '周向东', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '8', Name: '韩佳琪', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '9', Name: '赵梦琪', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '10', Name: '欧开乐', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '11', Name: '付靖淇', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '12', Name: '李  鑫', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '13', Name: '汪冬冬', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '14', Name: '高侃', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '15', Name: '张轶哲', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '16', Name: '李春亮', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '17', Name: '孙  寇', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '18', Name: '张俊杰', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '19', Name: '范  硕', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '20', Name: '任俊杰', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '21', Name: '马志鹏', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '22', Name: '黄钰龙', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '23', Name: '段佳敏', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '24', Name: '倪昕怡', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '25', Name: '汪九红', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '26', Name: '王婧瑶', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '27', Name: '杨  龙', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '28', Name: '杨耘茶', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '29', Name: '聂智超', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '30', Name: '孙博锴', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '31', Name: '徐小博', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '32', Name: '宋双祥', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '33', Name: '陈天源', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '34', Name: '张淼', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '35', Name: '李瑞敏', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '36', Name: '郑  杨', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '37', Name: '杨建秋', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '38', Name: '卿仁星', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '39', Name: '曲彧辉', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '40', Name: '孙  悦', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '41', Name: '张国颖', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '42', Name: '戚欣怡', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '43', Name: '陈羽青', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '44', Name: '丛亦千羽', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '45', Name: '曾天麒', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '46', Name: '刘锦', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '47', Name: '张轩瑞', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '48', Name: '李阳', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '49', Name: '庄诗怡', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '50', Name: '孙振迪', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '51', Name: '吴文楷', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '52', Name: '张旭', Facility: '长春', Level: '学生', Position: '动画', ...dates },
  { Sequence: '53', Name: '单伟杰', Facility: '长春', Level: '学生', Position: '动画', ...dates },
]

const selfTableHeight = computed(() => {
  let height = props.tableHeight
  if (tableTitle.value) {
    height = props.tableHeight - tableTitle.value.offsetHeight
  }
  return height
})

const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (rowIndex === 0) {
    if (columnIndex === 1) {
      return [1, 1]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}
onMounted(() => {})
</script>
<style scoped lang="scss"></style>
